<template>
  <div class="helpCenter">
    <assets-head :title="$t('帮助中心')" />
    <div class="content">
      <div class="item" v-for="(item,index) in listArr" :key="index" @click="$router.push({
        path: '/helpDetail',
        query: { // 这个位置把参数都带过去
          ...item
        }
        })">
        <span class="textColor">{{item.title}}</span>
        <div class="moreBox"><img src="@/assets/image/userCenter/more.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import assetsHead from "@/components/assets-head";
import Axios from "@/API/login.js";
export default {
  name: "helpCenter",
  components:{
    [Icon.name]:Icon,
    assetsHead
  },
  data() {
    return {
      listArr:[]
    }
  },
  mounted(){
    this.getHelpCenter()
  },
  methods:{
    onClickLeft() {
      this.$router.push('/')
    },
    getHelpCenter(){
      Axios.helpCenter({
        model: 'help_center',
        language: this.$i18n.locale,
      }).then((res) => {
        this.listArr = res.data
        console.log('list',res)
      }).catch((error) => {
        if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
        else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}        
      });
    },
  }

}
</script>

<style lang="scss" scoped>


.helpCenter{
  width: 100%;
  box-sizing: border-box;
}

.content{
  font-size: 26px;
  padding: 0 32px;
}
.item{
  padding: 35px 0;
  text-decoration: underline;
  display: flex;
  justify-content: space-between;
}
.moreBox{
    width: 26px;
    height: 26px;

    img {
      width: 100%;
      height: 100%;
    }
}
</style>